<template>
  <div class="login">
    <div class="box">
      <div class="box-t">
        <!-- <img src="../../assets/imgs/logo.png" alt="" /> -->
        <p>系统登录</p>
      </div>

      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="0"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item prop="account">
          <el-input
            type="text"
            v-model="ruleForm.account"
            autocomplete="off"
            prefix-icon="iconfont icon-account"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            :type="visiable ? 'text' : 'password'"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="iconfont icon-password"
          >
            <i
              slot="suffix"
              class="iconfont"
              :class="visiable ? 'icon-eye-open' : 'icon-eye-close'"
              @click="visiable = !visiable"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginApi } from "@/api/user";
import { calcRoutes } from "@/router/index";

export default {
  data() {
    return {
      ruleForm: {
        account: "66668888",
        password: "mima134274",
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 14,
            message: "请输入 2 到 14 位用户名",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "请输入 6 到 12 位密码",
            trigger: "blur",
          },
        ],
      },
      visiable: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 发ajax和跳转页面
          loginApi(this.ruleForm)
            .then((res) => {
              //console.log(res.data);
              let { code, msg } = res.data;
              if (code == 0) {
                // this.$message.success(msg);
                localStorage.setItem("tk", res.data.token);
                localStorage.setItem("role", res.data.role);
                calcRoutes()
                this.$router.push("/home");
              }
            })
            .catch((err) => {
              //console.log(err);
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../../assets/imgs/1626936586576.gif') no-repeat;
  background-size: cover;

  .box {
    margin: 0 auto;
    width: 500px;
    position: relative;
    bottom: 50px;
    left: 0;

    .box-t {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 70%;
      }
      p {
        color: #fff;
        text-align: center;
        margin-bottom: 30px;
        font-size: 30px;
      }
    }

    .el-button {
      width: 100%;
    }
    /deep/.el-input__inner {
      background-color: transparent;
    }
  }
}
</style>